<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script>
        function f1(){
            // pattern:正则表达式的内容
            // attributes:正则表达式的修饰符,可选
            // let regExp = /pattern/attributes;
            // let regExp = /^[a-z]{1,5}$/i;
            // +:1或多个
            // *:0或多个
            // ?:0或1个
            // let regExp = /^[a-z]?$/i;
            // let regExp = /^[a-z]{2,}$/i;
            // let regExp = /^[0-9]{5}[a-z]{5}$/i;
            // let regExp = /^\w+$/i;
            let regExp = /^\w(abc)?$/i;
            let inText = document.getElementById("inText").value;
            if(regExp.test(inText)){
                // 当返回值为true时,表示匹配
                // 当返回值为false是,表示不匹配
                document.getElementById("s1").innerHTML = "<span style='color:green;'>格式正确</span>";
                return;
            }
            document.getElementById("s1").innerHTML = "<span style='color:red;'>格式错误</span>";
        }
        function f2(){
            // pattern:正则表达式的内容
            // attributes:正则表达式的修饰符,可选
            // let regExp = new RegExp(pattern,attributes);
            // 由于参数是一个字符串,遇到特殊字符需要转义
            // 开发中一般使用的还是直接量语法
            let regExp = new RegExp("^\\w+$","i");
            let inText = document.getElementById("inText").value;
            if(regExp.test(inText)){
                // 当返回值为true时,表示匹配
                // 当返回值为false是,表示不匹配
                document.getElementById("s1").innerHTML = "<span style='color:green;'>格式正确</span>";
                return;
            }
            document.getElementById("s1").innerHTML = "<span style='color:red;'>格式错误</span>";
        }
    </script>
</head>
<body>
<input type="text" id="inText"/>
<button onclick="f1()">直接量语法</button>
<button onclick="f2()">通过创建RegExp对象进行定义</button>
<span id="s1"></span>
</body>
</html>